<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>添加菜单</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/common/layuimini/layui.css" media="all">
  <link rel="stylesheet" href="/common/layuimini/public.css" media="all">
  <link rel="stylesheet" href="/common/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <style>
    body {
      background-color: #ffffff;
    }
    h4{ font-size:18px;font-family:"Microsoft YaHei","Simsun",Arial; font-weight:normal; line-height:1; padding:0; margin:0;}
    .icons li{  margin:5px 0; text-align:center; height:70px; cursor:pointer;}
    .icons li i{ display:block; font-size:10px; margin:10px 0; line-height:15px; height:15px;}
    .icons li:hover{ background:#2f4056; border-radius:5px; color:#fff;}
    .icons li:hover i{ font-size:15px;}
    .section{ padding:5px;}
    /*.section h4 span{ color:#0084e9;}*/
    .fa {font-size: 25px !important;}
    .fa:hover {font-size: 10px !important;}
    .layui-col-sm3 {width: 14% !important;}
  </style>
</head>
<body>
<div class="layui-form layuimini-form">
  <div class="layui-form-item">
    <label class="layui-form-label required">上级菜单</label>
    <div class="layui-input-block">
      <div id="parentMenu" class="parentMenu"></div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label required">菜单类型</label>
    <div class="layui-input-block">
      <input type="radio" name="menuType" lay-filter="menuType" value="M" title="菜单">
      <input type="radio" name="menuType" lay-filter="menuType" value="C" title="目录">
      <input type="radio" name="menuType" lay-filter="menuType" value="F" title="按钮">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label required">菜单名称</label>
    <div class="layui-input-block">
      <input name="menuTitle" lay-verify="required" lay-reqtext="菜单名称不能为空" placeholder="请输入菜单名称" value="" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item menu-url">
    <label class="layui-form-label">请求地址</label>
    <div class="layui-input-block">
      <input name="menuHref" placeholder="请输入请求地址" value="" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item menu-perms">
    <label class="layui-form-label">权限标识</label>
    <div class="layui-input-block">
      <input name="perms" placeholder="请输入权限标识" value="" class="layui-input">
      <tip>权限标识, 如: system:cache:view</tip>
    </div>
  </div>
  <div class="layui-form-item menu-icon">
    <label class="layui-form-label required">图标</label>
    <div class="layui-input-block">
      <div id="icon" class="icon"></div>
    </div>
  </div>
  <div class="layui-form-item menu-status">
    <label class="layui-form-label required">菜单状态</label>
    <div class="layui-input-block">
      <input type="radio" name="visible" value="1" title="显示" checked="">
      <input type="radio" name="visible" value="-1" title="隐藏">
    </div>
  </div>

  <div class="layui-form-item" style="margin: 25px 10px;position: fixed;bottom: 0;right: 5%;">
    <div class="layui-input-block">
      <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
      <button type="button" class="layui-btn layui-btn-primary" onclick="javascript:parent.layer.close(parent.layer.getFrameIndex(window.name));">取消</button>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="/js/menu/menu-ui.js"></script>
<script type="text/javascript" src="/common/layui/layui.js"></script>
<script type="text/javascript" src="/common/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/common/xm-select/xm-select.js"></script>
<script type="text/javascript">
  //父级菜单选择框初始化
  var demo1 = xmSelect.render({
    el: '#parentMenu',
    model: { label: { type: 'text' } },
    radio: true,
    clickClose: true,
    theme: {
      color: '#0081ff',
    },
    tree: {
      show: true,
      strict: false,
      expandedKeys: [ 1 ],
    },
    height: 'auto',
    data: queryMenuXmTree()
  })

  function queryMenuXmTree(){
    var xmTreeData;
    $.ajax({
      url: "/menu/admin/queryMenuXmTree",
      type: "get",
      async: false,
      success(res){
        if (res.state){
          xmTreeData = res.data;
        }
      },
      error(res){
        console.log(res)
      }
    })
    return xmTreeData;
  }

  //图标菜单选择框初始化
  var demo2 = xmSelect.render({
    el: '#icon',
    model: { label: { type: 'text' } },
    radio: true,
    clickClose: true,
    theme: {
      color: '#0081ff',
    },
    prop: {
      name: 'menuIcon',
      value: 'menuIcon',
    },
    content: selectIconHtml
  })

  $(".menuIcons .layui-col-xs4").click(function (){
    var values = demo2.getValue();
    var item = {menuIcon: $(this)[0].children[0].classList.value}

    demo2.delete(values)
    demo2.append([ item ]);

    demo2.closed();
  })


  layui.use(['form'], function () {
    var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

    form.on('submit(saveBtn)', function (data) {
      var parentMenu = demo1.getValue();
      var icon = demo2.getValue();
      if (data.field.menuType === undefined){
        layer.msg('请选择菜单类型',{icon:2,time:800})
        return;
      }
      if (icon.length === 0 && data.field.menuType !== 'F'){
        demo2.warning('#c75450', true);
        layer.msg('请选择图标',{icon:2,time:800})
        return;
      }
      const formData = {
        "parentId": demo1.getValue()[0].value,
        "menuType": data.field.menuType,
        "title": data.field.menuTitle,
        "href": data.field.menuHref,
        "perms": data.field.perms,
        "icon": icon.length === 0 ? "#": icon[0].menuIcon,
        "visible": data.field.visible
      }
      $.ajax({
        url: '/menu/admin/saveMenu',
        type: "post",
        dataType: 'json',
        headers:{'Content-Type':'application/json;charset=utf8'},
        data: JSON.stringify(formData),
        success(res) {
          if (res.state){
            parent.window.location.reload();
            parent.layer.closeAll();
          }
          console.log(res)
        },
        error(res) {
          console.log(res)
        }
      })
    });


    form.on('radio(menuType)', function (data) {  //radio-type为lay-filter的属性值
      if (data.value === 'M'){
        $(".menu-url").hide();
        $(".menu-perms").hide();
        $(".menu-icon").show();
        $(".menu-status").show();
      }else if (data.value === 'C'){
        $(".menu-url").show();
        $(".menu-perms").show();
        $(".menu-icon").show();
        $(".menu-status").show();
      }else if (data.value === 'F'){
        $(".menu-url").hide();
        $(".menu-perms").show();
        $(".menu-icon").hide();
        $(".menu-status").hide();
      }
    });

  });
</script>
</html>